/**
* 功能描述：基础日期时间范围选择器样式表
* @author jin xiaohang
* @date 2022/9/21 14:57
*/

@import "src/style/mixins/index";

//布局相关
@include b(base-date-time-range-picker-layout){
  display: flex;
  flex-direction: column;
  width: 740px;
  height: 480px;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 8px #00000026;

  //范围选择面板布局
    .#{$namespace}-base-date-time-range-picker-panel-layout{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 740px;
      height: 400px;
      border-style: groove;
      border-width: 1px;
      margin-top: 5px;

      //左侧待选面板布局
      .#{$namespace}-base-date-time-range-picker-panel-left-layout{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 50%;
          height: 100% ;
          border-right-style: groove;
          border-right-width: 1px;

        //左侧范围选择单元格布局
          .#{$namespace}-base-date-time-range-picker-panel-left-cell{
              width: 30%;
              height: 50%;
          }
      }

      //右侧待选面板布局
      .#{$namespace}-base-date-time-range-picker-panel-right-layout{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 50%;
          height: 100%;

        //右侧范围选择单元格布局
          .#{$namespace}-base-date-time-range-picker-panel-right-cell{
            width: 30%;
            height: 50%;
          }
      }
    }
}

//样式相关
@include b(base-date-time-range-picker-style){

  //范围选择左边面板样式
  .#{$namespace}-base-date-time-range-picker-panel-left-style{
    background-color: #FFFFFF;
      div{
        cursor:pointer;

        //鼠标悬停
        &:hover{
          color: #40d9ff;
        }

        //聚焦 激活
        &:focus &:active{
          background-color: #C0C4CC;
        }
      }
  }

  //范围选择右边面板样式
  .#{$namespace}-base-date-time-range-picker-panel-right-style{
    background-color: #FFFFFF;
      div{
        cursor:pointer;

        //鼠标悬停
        &:hover{
          color: #40d9ff;
        }

        //聚焦 激活
        &:focus &:active{
          background-color: #F5F7FA;
        }
      }
  }

}